<template>
  <div class="dialog-wrapper">
    <el-dialog
      :visible="true"
      title="选择销售订单"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      style="z-index: 1000"
      @close="handleCancel"
    >
      <el-card shadow="never" class="aui-card--fill managementWrapper">
        <div class="mod-sys__user">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="handleSearch()"
          >
            <el-form-item>
              <el-input
                v-model="dataForm.order_serial"
                placeholder="订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="dataForm.name"
                placeholder="订单名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="dataForm.sale_date"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleSearch()">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="dataListLoading"
            :data="dataList"
            border
            @selection-change="dataListSelectionChangeHandle"
            @sort-change="dataListSortChangeHandle"
            style="width: 100%"
          >
            <el-table-column label="" align="center" width="35">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.$index"
                  v-model="templateSelection"
                  @change.native="getCurrentRow(scope.row)"
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-radio
                >
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              header-align="center"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="order_serial"
              label="订单编号"
              header-align="center"
              align="center"
              width="241"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="订单名称"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="sale_date"
              label="销售日期"
              sortable="custom"
              header-align="center"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="order_sub"
              label="产品概要"
              header-align="center"
              align="center"
              width="350"
            >
              <template slot-scope="scope">
                <div
                  class="specBox disCenter"
                  v-if="scope.row.order_sub.length > 0"
                >
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="scope.row.order_sub[0].product_name"
                    placement="top"
                  >
                    <span class="overTwoHidden" style="max-width: 160px">{{
                      scope.row.order_sub[0].product_name
                    }}</span>
                  </el-tooltip>
                  <el-popover placement="right" trigger="hover">
                    <div
                      class="popover-box"
                      v-for="(item, index) in scope.row.order_sub"
                      :key="index"
                    >
                      <div v-if="index < 4" class="disCenter">
                        <div class="rightBox" style="margin-left: 12px">
                          <el-tooltip
                            class="item"
                            effect="light"
                            :content="item.product_name"
                            placement="top"
                          >
                            <span
                              class="overTwoHidden"
                              style="max-width: 150px"
                              >{{ item.product_name }}</span
                            >
                          </el-tooltip>
                          <div>
                            <span>规格：{{ item.sku_name }}</span>
                            <span>数量：{{ item.sale_num }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <span slot="reference" class="specDetail disCenter"
                      >等 {{ scope.row.order_sub.length }} 项
                      <i class="el-icon-caret-bottom"></i
                    ></span>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="num"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChangeHandle"
            @current-change="pageCurrentChangeHandle"
          >
          </el-pagination>
        </div>
      </el-card>
      <template slot="footer">
        <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="handleCheck">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import { addDynamicRoute } from "@/router";
import { getProductClassify } from "@/api";
export default {
  mixins: [mixinViewModule],
  props: {
    is_bom: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/order",
        getDataListIsPage: true,
        deleteURL: "/order_delete",
        deleteIsBatch: true,
      },
      dataForm: {
        name: "",
        sale_date: "",
        product_name: "",
      },
      value: "",
      chooseOrderInfo: {},
      templateSelection: "",
    };
  },
  watch: {
    is_bom: {
      handler(val) {
        console.log(val);
        if (val) {
          this.dataForm.is_bom = "1";
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    getCurrentRow(row) {
      this.templateSelection = this.dataList.indexOf(row);
      this.chooseOrderInfo = row;
    },
    handleSearch() {
      this.dataForm.classify_ids = this.value;
      this.getDataList();
    },
    handleCancel() {
      this.$emit("handleClose");
    },
    handleCheck() {
      if (JSON.parse(JSON.stringify(this.chooseOrderInfo)) === "{}") {
        this.$message.warning("请选择销售订单");
        return;
      }
      this.$emit("handleConfirm", this.chooseOrderInfo);
      this.$emit("handleClose");
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  ::v-deep .el-dialog {
    width: 70% !important;
  }

  .managementWrapper {
    .specBox {
      .specDetail {
        margin-left: 12px;
        color: $mainColor;
        cursor: pointer;
      }
    }
    .prodBox {
      .imgBox {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightBox {
        margin-left: 14px;
        text-align: left;
        .top {
          max-width: 200px;
          margin-bottom: 6px;
        }
        .bottom {
          color: $mainColor;
        }
      }
    }
  }
}
</style>

<!-- <style lang="scss" scoped>
    ::v-deep .el-table .cell {
      line-height: 19px !important;
    }
    </style> -->
